<template>
	<view class="fuben">
		<view class="status_bar"><!-- 这里是状态栏 --></view>

		<view class="main">

			<view class="topbox">
				<view class="t_itme" @click="$p.navto('/pages/land/combatPower')">
					<image src="http://img.cpgm.cc/panda/static/fuben/t1.png" mode="widthFix" />
					<text>提升</text>
				</view>
				<view class="line"></view>
				<view class="t_itme" @click="ybshow = true">
					<image src="http://img.cpgm.cc/panda/static/fuben/t2.png" mode="widthFix" />
					<text>元宝</text>
				</view>
				<view class="line"></view>
				<view class="t_itme" @click="$p.navto('/pages/game/store')">
					<image src="http://img.cpgm.cc/panda/static/fuben/t3.png" mode="widthFix" />
					<text>市场</text>
				</view>
				<view class="line"></view>
				<view class="t_itme" @click="$p.navto('/pages/index/backpack')">
					<image src="http://img.cpgm.cc/panda/static/fuben/t4.png" mode="widthFix" />
					<text>背包</text>
				</view>
			</view>

			<!-- tab部分 -->
			<view class="tab">
				<view v-for="(item,index) in tablist" :key="index" :class="[stat == item.id?'active':'']"
					@click="tabchange(item.id)">{{item.name}}</view>
			</view>

			<view class="list" v-show="stat == 1">
				<view class="item" v-for="(item , index) in list" :key="index">
					<view class="imgbox">
						<image :src="'http://img.cpgm.cc/panda/static/fuben/' + item.img" mode="widthFix" />
					</view>
					<view class="i_bot">
						<view class="i_left">
							<text>{{item.name}}</text>
							<text>扫荡后可获得大量实物奖励</text>
						</view>
						<view class="i_right">
							<text v-if="index==0">免费进入</text>
							<p v-else>战力<text>{{item.fight}}</text></p>
							<text></text>
							<view class="button" @click="$p.navto(`/pages/land/landdetail?id=${item.id}&land=${stat}&name=${item.name}&map=${item.map}&fight=${item.fight}`)">进入</view>
						</view>
					</view>
				</view>
			</view>

			<view class="list" v-show="stat == 2">
				<view class="item" v-for="(item , index) in list2" :key="index">
					<view class="imgbox">
						<image :src="'http://img.cpgm.cc/panda/static/fuben/' + item.img" mode="widthFix" />
					</view>
					<view class="i_bot">
						<view class="i_left">
							<text>{{item.name}}</text>
							<text>扫荡后可获得大量实物奖励</text>
						</view>
						<view class="i_right">
							<p>战力<text>{{item.fight}}</text></p>
							<text></text>
							<view class="button" @click="$p.navto(`/pages/land/landdetail?id=${item.id}&land=${stat}&name=${item.name}&map=${item.map}&fight=${item.fight}`)">进入</view>
						</view>
					</view>
				</view>
			</view>

			<view class="list" v-show="stat == 3">
				<view class="item" v-for="(item , index) in list3" :key="index">
					<view class="imgbox">
						<image :src="'http://img.cpgm.cc/panda/static/fuben/' + item.img" mode="widthFix" />
					</view>
					<view class="i_bot">
						<view class="i_left">
							<text>{{item.name}}</text>
							<text>扫荡后可获得大量实物奖励</text>
						</view>
						<view class="i_right">
							<p>战力<text>{{item.fight}}</text></p>
							<text></text>
							<view class="button" @click="$p.navto(`/pages/land/landdetail?id=${item.id}&land=${stat}&name=${item.name}&map=${item.map}&fight=${item.fight}`)">进入</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		
		<!-- 元宝换大米 -->
		<u-mask :show ="ybshow">
			<view class="playbox" :class="[ybshow?'playboxac':'']">
				<image class="closed2" @click="ybshow = false" src="http://img.cpgm.cc/panda/static/public/close.png" mode="widthFix" />
				<view class="content">
					<image class="yb" src="http://img.cpgm.cc/panda/static/fuben/red.png" mode="widthFix" />
					<h3>元宝换大米</h3>
					<p class="p_explain">刷副本，集元宝，兑大米</p>
					<view class="whitebox">
						<view class="imgbox2">
							<image class="t2" src="http://img.cpgm.cc/panda/static/fuben/t2.png" mode="widthFix" />
						</view>
						<view class="w_r">
							<image class="qian" src="http://img.cpgm.cc/panda/static/fuben/qian.png" mode="widthFix" />
							<p class="r_tlt">元宝数量： <text>{{userinfo.yuanbao}}</text> </p>
							<u-line-progress class="pross" :show-percent="false" active-color="#FF2F00" :percent="percent"></u-line-progress>
							<p class="r_explain">再获得{{(1000 - Number(userinfo.yuanbao)).toFixed(2)}}元宝即可提现1000大米</p>
						</view>
					</view>

					<view class="button" @click="widthdraw()">提现</view>
					<p class="reward">集齐1000个元宝，即可提现 <text>1000大米</text></p>
				</view>
			</view>
		</u-mask>




	
		




	</view>
</template>

<script>

	export default {
		data() {
			return {
				list: [{
						id: 1,
						map:1,
						img: '1.png',
						name: '高老庄',
						fight:0,
						gold:0,
						lv:0,
					},
					{
						id: 2,
						map:2,
						img: '2.png',
						name: '女儿国',
						fight:1000,
						gold:2,
						lv:120,
					},
					{
						id: 3,
						map:3,
						img: '3.png',
						name: '狮驼岭',
						fight:3000,
						gold:2.5,
						lv:150,
					},
				],
				list2: [
					{
						id: 4,
						map:1,
						img: '4.png',
						name: '小雷音寺',
						fight:40000,
						gold:4.5,
						lv:300,
					},
					{
						id: 5,
						map:2,
						img: '5.png',
						name: '花果山',
						fight:80000,
						gold:5,
						lv:340,
					},
					{
						id: 6,
						map:3,
						img: '6.png',
						name: '黑风山',
						fight:150000,
						gold:5.5,
						lv:380,
					},
				],
				list3: [{
						id: 7,
						map:1,
						img: '7.png',
						name: '魔王寨',
						fight:1050000,
						gold:7.5,
						lv:588,
					},
					{
						id: 8,
						map:2,
						img: '8.png',
						name: '白虎岭',
						fight:1500000,
						gold:8,
						lv:588,
					},
					{
						id: 9,
						map:3,
						img: '9.png',
						name: '南天门',
						fight:2000000,
						gold:8.5,
						lv:588,
					},
				],
				tablist: [{
						id: 1,
						name: '简单副本'
					},
					{
						id: 2,
						name: '进阶副本'
					},
					{
						id: 3,
						name: '噩梦副本'
					},
				],
				stat: 1,
				ybshow:false,
				percent:0,
				userinfo: uni.getStorageSync('userinfo'),
				tsshow:false,
			};
		},
		onShow(){
			this.getUserInfo();
		},
		methods: {
			// 获取个人信息
			getUserInfo(){
				this.$getUserInfo.getUserInfo((res)=>{
					this.userinfo = res.data
					this.percent = (Number(res.data.yuanbao) / 1000) *100
				})
			},	
			// 我的背包切换
			tabchange(id) {
				this.stat = id
			},

			widthdraw(){
				this.$u.toast('元宝不足')
			},
		},
	}
</script>


<style lang="less">
	.fuben {
		background: linear-gradient(180deg, #005FFE 0%, #2BD2F7 34%, #58F6D9 59%, #28E2F5 70%, #8B66FC 100%);
		// #ifdef APP-PLUS
		min-height: 100vh;
		// #endif
		// #ifdef H5
		min-height: calc(100vh - 75px);
		// #endif
	}

	.main {
		padding: 10px;
	}

	.topbox {
		background: rgba(255,255,255,0.8);
		box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1);
		border-radius: 5px;
		padding: 10px;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.t_itme {
			width: 24%;
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				width:50%;
			}
		}

		.line {
			width: 1px;
			background: rgba(0,0,0,0.1);
			height: 32px;
		}
	}


	// tab导航
	.tab {
		width: 100%;
		display: flex;
		align-items: center;
		background: rgba(255,255,255,0.7);
		box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1);
		border-radius: 5px;
		padding: 5px;
		overflow: hidden;
		margin: 10px auto;
		border-radius: 7px;
		// backdrop-filter: blur(50px);

		view {
			width: 50%;
			height: 42px;
			text-align: center;
			line-height: 42px;
			color: #343434;
			font-size: 13px;
			font-weight: 600;
			border-radius: 7px;
		}
	}
	.active {
		color: #FFFFFF !important;
		background: #000000 !important;
	}

	.topimg {
		display: flex;
		align-items: center;
		justify-content: space-between;

		image {
			width: 50px;
		}
	}


	.item {
		background: rgba(255,255,255,0.8);
		border-radius: 9px;
		margin-top: 10px;
		overflow: hidden;

		image {
			width: 100%;
		}
	}

	.i_bot {
		padding: 10px 10px;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.i_left {
			display: flex;
			flex-direction: column;

			text:nth-child(1) {
				color: #111110;
				font-size: 14px;
				font-weight: 600;
			}
			text:nth-child(2) {
				color: #343434;
				font-size: 12px;
				margin-top: 5px;
			}
		}

		.i_right {
			display: flex;
			flex-direction: column;
			align-items: center;

			p{
				color: #343434;
				font-size: 12px;
			}
			text {
				font-size: 12px;
				font-weight: 600;
				color: #fff;
				line-height: 15px;
				background: linear-gradient(180deg, #FF2F00 0%, #FF8758 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
			.button {
				width: 82px;
				height: 33px;
				background: linear-gradient(180deg, #7AFDCF 0%, #0477FD 100%);
				border-radius: 17px;
				border: 2px solid #FFFFFF;
				color: #fff;
				margin-top: 5px;
			}
		}
	}

	.title {
		width: 110px;
		height: 24px;
		background: url('http://img.cpgm.cc/panda/static/fuben/top.png');
		background-size: 100% 100%;
		margin: -11px auto 0;
		text-align: center;
		line-height: 24px;
		color: #CE6B34;
		font-size: 13px;
	}

	@keyframes zwyHover1 {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(0.9);
		}

		100% {
			transform: scale(1);
		}
	}

	.zwyHover1 {
		--count: infinite;
		animation: zwyHover1 .6s var(--count) !important;
	}

.flexbw {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 5px;

	text {
		color: #239D4C;
	}

	p {
		display: flex;
		align-items: center;

		image {
			width: 20px;
			margin: 0 !important;
		}
	}
}

.imgbox {
	position: relative;
	line-height: 0;
	

	image {
		width: 100%;
	}
	p {
		position: absolute;
		right: 0px;
		bottom:0px;
		color: #FEE1C3;
		min-width: 40%;
		text-align: center;
		height: 40px;
		line-height: 40px;
		background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);
		border-radius: 0px 0px 10px 0px;
		text {
			color: #1CFF00;
		}
	}
}

.marr10 {
	margin-right: 10px;
}


.probox {
	position: relative;
	background: linear-gradient(180deg, #FAD9BF 0%, #FFFFFF 100%);
	box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1);
	padding: 25px 12px;
	border-radius: 18px 18px 0px 0px;
}

.p_content {
	h3 {
		color: #000000;
		font-size: 25px;
		text-align: center;
	}

	.button {
		width: 90%;
		height: 54px;
		background:  linear-gradient(270deg, #FF456B 0%, #FE5C4F 100%);
		border-radius: 5px;
		color: #fff;
		font-size: 14px;
		margin: 0 auto;
		margin-top: 20px;
	}
}


.p_explain {
	color: #696969;
	font-size: 16px;
	text-align: center;
	font-weight: 600;
}

.p_close {
	position: absolute;
	width: 30px;
	right: 10px;
	top: 10px;
}

.whitebox {
	width: 100%;
	background: rgba(255,255,255,0.9);
	border-radius: 7px;
	padding: 10px;
	margin-top: 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;


}

.imgbox2 {
	width: 72px;
	height: 72px;
	background: rgba(255, 76, 59, 0.21);
	border-radius: 7px;

	image {
		width: 100%;
	}
	margin-right: 15px;
}

.w_r {
	flex: 1;
	display: flex;
	flex-direction: column;
	position: relative;

	.qian {
		width: 50px;
		position: absolute;
		right: 0px;
	}
}

.r_tlt {
	color: #111110;
	font-size: 14px;

	text {
		font-size: 16px;
		font-weight: bold;
		color: #fff;
		line-height: 23px;
		background: linear-gradient(180deg, #FF2F00 0%, #FF8758 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
}

.pross {
	margin-top: 15px;
}

.r_explain {
	font-size: 11px;
	font-weight: 400;
	color: #fff;
	line-height: 17px;
	background: linear-gradient(180deg, #FF2F00 0%, #FF8758 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-top: 2px;
}

.reward {
	color: #696969;
	font-size: 13px;
	text-align:center;
	margin-top: 10px;

	text {
		font-size: 13px;
		font-weight: 600;
		color: #fff;
		line-height: 17px;
		background: linear-gradient(180deg, #FF2F00 0%, #FF8758 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
}
.p_meat {
	position: fixed;
	top: -20%;
	left: 50%;
	transform: translate(-50% , -50%);
	width: 140px;
	z-index: 9999;
}
	
::v-deep .u-drawer-content {
	overflow: initial !important;
}



// 转赠

.playbox {
	width: 100%;
	position: absolute;
	left: 0%;
	bottom: -50vh;
	background: url('http://img.cpgm.cc/panda/static/mask/bbg.png');
	background-size: 100% 100%;
	transition: all 0.3s linear;

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20px;

		.yb {
			width: 32%;
			margin-top: -18%;
		}

		h3 {
			position: relative;
			color: #000000;
			font-size: 20px;
			width: 50%;
			text-align: center;
			z-index: 2;
			margin: 20px 0;
		}
		

		h3::after {
			content: '';
			width: 100%;
			height: 30px;
			background: url('http://img.cpgm.cc/panda/static/mask/banner.png');
			background-size: 100% auto;
			background-position: center;
			background-repeat: no-repeat;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}

		.piece {
			width: 100%;
			background: #FFFFFF;
			border-radius: 9px;
			padding: 15px;
			display: flex;
			align-items: center;
			margin: 5px 0;

			text {
				color: #1D1E24;
				font-size: 14px;
				font-weight: 600;
				margin-right: 10px;
			}

			input {
				text-align: center;
				flex: 0.9;
			}
		}

		.allmoney {
			margin-top: 20px;
			color: #696969;
			font-size: 14px;
			font-weight: 600;

			text {
				color: #000;
			}
		}

		.button {
			height: 68px;
			width: 100%;
			background: url('http://img.cpgm.cc/panda/static/public/btn3.png');
			background-size: 100% 100%;
			color: #B73800;
			font-size: 18px;
			font-weight: 600;
			margin-top: 10px;
		}

	}
	.closed2 {
		position: absolute;
		width: 25px;
		top: 8%;
		right: 15px;
	}

	.tips {
		width: 100%;
		text-align: left;
		color: #696969;
		font-size: 12px;
		margin-top: 5px;
	}
}

.playboxac {
	bottom:0 !important;
}



</style>